
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>留言板练习</title>
	<link rel="stylesheet" href="./file/css/style.css" />
	<script type="text/javascript" src='file/js/jquery-1.11.3.min.js'></script>
	<script type="text/javascript" src='file/js/js.js'></script>
	<script type="text/javascript">
		$(function(){
			// 给删除绑定事假
			$('.delete').click(function(){
				var key=$(this).attr('key');
//				alert(key);				
				var imgkey=$(this).attr('imgkey');

				if(confirm("你确定要删除这条留言吗？")){
					location.href="./del.php?key="+key+"&imgkey="+imgkey;
				}		
			});			
		})		
	</script>
</head>

<body>
<div class="fixed">
	<a href="#bg"></a>
</div>
	
	<div class="bg" id="bg">
		
	</div>
	<div class="owner_body">
		<div class="owner">
			<h4><a href="">留言板</a></h4>
			<div class="send_word">
				<span><strong>主人寄语</strong></span>
				<a href="javascript:;" class="underline word_compile">添加寄语</a>
				<button style="display:none">确定</button>
			</div>
			<textarea name="" id="self_word" style="display:none"></textarea>
			<div class="self">
				<h1 class="red">Dream</h1>
				<h1 class="dream">梦想</h1>
				<p>希望有天　留言很多</p>
				<p class='red'>Hope　one　day　you　will　suddenly　and　contact　me</p>	
				<p>渴望有一天 空间人气狂飙</p>
				<p class='red'>Even　social　amenities</p>
				<p>渴望有天　说说的评论不断增加</p>				
				<p class='red'>Long　for　the　day　I　lost　most　of　the　time</p>
				<p>盼望有天 相册浏览增加</p>
				<p class='red'>Can　you　by　my　side</p>
				<p class="sign">阿柱</p>
			</div>
		</div>
		<div class="msg_form">
			<form action="" method="post" id="msg" enctype="multipart/form-data">		
				<span><strong>发表您的留言▼</strong></span> 姓名:<input type="text" name="user" id="user" placeholder="请输入昵称.." required/>
				<div class="picture_upload">
					<div class="name_img fl">头像一经上传，不可修改</div>
					<div class="picture fl">
						<input type="file" name="name_img" id="name_img" required />
						<label for="name_img">
							<div class="upload_img">请上传头像（格式为：jpg,jpeg,png,gif）*</div>
						</label>	
					</div>						
				</div>				
				内容：<textarea name="content" id="content" placeholder="在此输入您的留言..." required></textarea>
				<input type="submit" value="发表" id="sub" style="margin-top:5px;" />				
			</form>			
		</div>
		<div class="msg_con">
			<div class="top_page">
				<h4 class="fl">留言(<span><?php echo count($data) ?></span>)</h4>
				<ul class="fl msg_set">
					<li><a href="" class="underline">留言板设置</a> ▼</li>
				</ul>
			</div>
			<?php if(empty($data)): ?>
			<div class="friend_msg" style="text-align:center;line-height:100px;">
				<h1>快来抢沙发吧！</h1>
			</div>
			<?php else: ?>
			<!-- 使用array_reverse（）将数组的键值倒序输出 $data2=array_reverse($data);-->
			<?php foreach ($data as $k => $v) {  ?>
			<div class="friend_msg">
				<div class="touxiang fl">
					<a href=""><img src="<?php $arr=glob('./face/*'); echo $arr[$k]; ?>" alt="" width="50" height="50"/></a>
				</div>
				<div class="inner fl">
					<p>
						<a href="" class="underline"><?php echo "Name:" .$v['user'];  ?></a>
<!--统计数组的单元长度减去它的键名就是倒序过来的楼层<?php $floor=count($data)-$k; echo "第 ".$floor." 楼"; ?>-->
						<span><?php 					
										global $count;
										$count--;		
										$floor=count($data)-$count;
										echo '第'.$floor.'楼'; ?>
						</span>
						<a href="./edit.php?key=<?php echo $k;?>" class="fr underline edit" style="display:none">修改</a>
						<a href="javascript:;" class="fr underline delete" style="display:none" key="<?php echo $k;?>" imgkey="<?php $arr=glob('./face/*'); echo $arr[$k]; ?>">删除</a>
					</p>
					<div class="msg">
						<?php echo $v['content'] ?>
					</div>
					<div class="dataTime">
						<span>发表于：<?php echo $v['time'] ?></span>
						<a href="" class="underline">回复</a>
						<a href="" class="underline">送礼</a>
						<span style="position: absolute;top:0px;right:0px;">修改于：<?php echo $v['edit_time'] ?></span>
					</div>
				</div>
			</div>
			<?php } ?>
			<?php endif; ?>
			<div class="self_msg">
				<a href="#msg" class="underline">我要留言</a>
				<a href="javascript:;" class="underline manage">批量管理</a>
				<p>上一页，下一页，确定</p>
			</div>			
		</div>

	</div>


</body>
</html>


